<template>
  <detail-page v-loading="loading">
    <template #top>
      <info-header id="basic" title="基本信息"></info-header>
      <pub-detail-description :data="pageData" :columns="basic">
        <template #registerProvinceName>
          {{
            pageData.registerProvinceName +
            pageData.registerCityName +
            pageData.registerCountyName +
            pageData.registerStreetName +
            pageData.registerCommunityName
          }}
        </template>
        <template #provinceName>
          {{
            pageData.provinceName +
            pageData.cityName +
            pageData.countyName +
            pageData.streetName +
            pageData.communityName
          }}
        </template>
        <template #longitude>
          经度：{{
            pageData.longitude
          }}，
          纬度：{{
            pageData.latitude
          }}
        </template>
      </pub-detail-description>
      <info-header id="people" title="家庭成员" class="mt-15px"></info-header>
      <pub-detail-description :data="pageData" :columns="people"></pub-detail-description>
      <div>
        <list-page class="wh-full" :no-padding="true">
          <pub-table-auto-height ref="pubTable" :column="columns" :data="tableData">
            <!-- <template v-slot:option="scope">
                <el-button plain type="primary" @click="detail">详情</el-button>
              </template> -->
          </pub-table-auto-height>
        </list-page>
      </div>
      <info-header id="health" title="健康情况"></info-header>
      <pub-detail-description :data="pageData" :columns="health"></pub-detail-description>
      <info-header id="life" title="生活需求"></info-header>
      <pub-detail-description :data="pageData" :columns="life"></pub-detail-description>

      <info-header id="files" class="mt-5px" title="附件信息"></info-header>
      <pub-detail-description :data="pageData" :columns="files"></pub-detail-description>
    </template>
  </detail-page>
</template>

<script setup>
import { formatValue } from '@/utils/index'
import { get_zzda_detail } from '@/api/basicSetting.js'
const loading = ref(false)
const route = useRoute()
import { ElMessage, ElMessageBox } from 'element-plus'
// const router = useRouter()
const emit = defineEmits(['getZXXX'])
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const pageData = ref({})

const basic = [
  { prop: 'name', label: '老人姓名', span: 1 },
  {
    prop: 'cardTypeCode',
    label: '证件类型',
    span: 1,
    type: 'dict',
    dictCode: 'ZJLX'
  },
  { prop: 'idCard', label: '证件号码', span: 1 },
  { prop: 'sexCode', label: '性别', span: 1, type: 'dict', dictCode: 'XB' },
  { prop: 'birthDate', label: '出生日期', span: 1 },
  { prop: 'age', label: '年龄', span: 1 },
  { prop: 'contactNumber', label: '联系方式', span: 1 },
  { prop: 'nationCode', label: '民族', span: 1, type: 'dict', dictCode: 'MZ' },
  {
    prop: 'registerProvinceName',
    label: '户籍区划',
    span: 2,
    type: 'slot',
    slotName: 'registerProvinceName'
  },
  { prop: 'registerAddress', label: '户籍详细地址', span: 1 },
  {
    prop: 'marriageCode',
    label: '婚姻状况',
    span: 1,
    type: 'dict',
    dictCode: 'HYZT'
  },
  {
    prop: 'provinceName', label: '居住区划', span: 2, type: 'slot',
    slotName: 'provinceName'
  },
  { prop: 'address', label: '居住详细地址', span: 1 },
  {
    prop: 'longitude', label: '居住地址定位', span: 1, type: 'slot',
    slotName: 'longitude'
  },
  {
    prop: 'degreeCode',
    label: '文化程度',
    span: 1,
    type: 'dict',
    dictCode: 'WHCD'
  },
  {
    prop: 'economySource',
    label: '主要经济来源',
    span: 1,
    type: 'dictCheckbox',
    dictCode: 'ZZDA-ZYJJLY'
  },
  { prop: 'isRetire', label: '退休', span: 1, type: 'dict', dictCode: 'SF' },
  { prop: 'originWorkUnit', label: '原工作单位', span: 1 },
  {
    prop: 'religionCode',
    label: '宗教信仰',
    span: 1,
    type: 'dict',
    dictCode: 'ZZDA-ZJXY'
  },
  { prop: 'religionOther', label: '宗教信仰其他', span: 1 },
  { prop: 'specialKill', label: '个人特长', span: 2 },
  { prop: 'interest', label: '爱好', span: 1 },
  { prop: 'orgName', label: '社区养老服务中心', span: 1 },
  {
    prop: 'elderType',
    label: '老人类别',
    span: 2,
    type: 'dictCheckbox',
    dictCode: 'LRLB'
  },
  {
    prop: 'economyTypeCode',
    label: '经济类型',
    span: 2,
    type: 'dictCheckbox',
    dictCode: 'ZZDD_JJLX'
  }
]
const health = [
  { prop: 'diastolicPressure', label: '血压（舒张压）', span: 1 },
  { prop: 'systolicPressure', label: '血压（收缩压）', span: 1 },
  { prop: 'bloodSugar', label: '血糖', span: 1 },
  {
    prop: 'bloodGroup',
    label: '血型',
    span: 1,
    type: 'dict',
    dictCode: 'ZZDA-XY'
  },
  {
    prop: 'nurseLevelCode',
    label: '能力等级',
    span: 1,
    type: 'dict',
    dictCode: 'ZZDA-NLDJ'
  },
  { prop: 'nurseLevelDescription', label: '能力等级情况说明', span: 1 },
  {
    prop: 'mentalProfileCode',
    label: '心理特征',
    span: 1,
    type: 'dictCheckbox',
    dictCode: 'ZZDA-XLTZ'
  },
  { prop: 'mentalProfileOther', label: '心理特征（其他）', span: 1 },
  {
    prop: 'precursorCode',
    label: '痴呆前兆',
    span: 1,
    type: 'dictCheckbox',
    dictCode: 'ZZDA-CDQZ'
  },
  { prop: 'precursorOther', label: '痴呆前兆（其他）', span: 1 },
  { prop: 'medicalHistoryCode', label: '病史', span: 1, type: 'dictCheckbox', dictCode: 'ZZDA-BS' },
  { prop: 'medicalHistoryOther', label: '病史（其他）', span: 1 }
]


const people = [
  {
    prop: 'liveCode',
    label: '居住情况',
    span: 1,
    type: 'dict',
    dictCode: 'JZQK'
  }
]
const life = [
  {
    prop: 'lifeNeedCode',
    label: '生活需求',
    span: 1,
    type: 'dictCheckbox',
    dictCode: 'ZZDA-SHXQ'
  },
  { prop: 'lifeNeedOther', label: '生活需求（其他）', span: 1 },
  {
    prop: 'domesticNeedCode',
    label: '家政需求',
    span: 1,
    type: 'dictCheckbox',
    dictCode: 'ZZDA-JZXQ'
  },
  { prop: 'domesticNeedOther', label: '家政需求（其他）', span: 1 },
  {
    prop: 'healthcareNeedCode',
    label: '医疗需求',
    span: 1,
    type: 'dictCheckbox',
    dictCode: 'ZZDA-YLXQ'
  },
  { prop: 'healthcareNeedOther', label: '医疗需求（其他）', span: 1 },
  {
    prop: 'spiritualNeedCode',
    label: '精神需求',
    span: 1,
    type: 'dictCheckbox',
    dictCode: 'ZZDA-JSXQ'
  },
  { prop: 'spiritualNeedOther', label: '精神需求（其他）', span: 1 },
  {
    prop: 'specialSituationCode',
    label: '老年人及其家庭特殊情况说明',
    span: 1,
    type: 'dictCheckbox',
    dictCode: 'ZZDA-TSQKSH'
  },
  { prop: 'specialSituationOther', label: '老年人及其家庭特殊情况说明（其他）', span: 1 }
]
const columns = ref([
  { label: '姓名', prop: 'name' },
  { label: '身份证号码', prop: 'idCard' },
  { label: '性别', prop: 'sexCode', type: 'formatDict', formatCode: 'XB' },
  {
    label: '与老人关系',
    prop: 'relationshipCode',
    type: 'formatDict',
    formatCode: 'JSGX',
    width: 140
  },
  { label: '联系方式', prop: 'contactNumber' },
  // { label: '操作', type: 'option', width: 100, fixed: 'right' }
])
const tableData = ref([])

const files = [
  {
    prop: 'headPhoto',
    label: '老人头像',
    span: 3,
    type: 'file'
  },
  {
    prop: 'cardFrontPhoto',
    label: '身份证国徽面',
    span: 3,
    type: 'file'
  },
  {
    prop: 'cardBackPhoto',
    label: '身份证头像面',
    span: 3,
    type: 'file'
  }
]



onMounted(() => {
  if (props.id) {
    getDetail()
  }
})

const getDetail = async () => {
  loading.value = true
  const res = await get_zzda_detail(props.id)
  if (res.data) {
    pageData.value = res.data
    tableData.value = res.data.list
    emit('getZXXX', res.data)
  }
  loading.value = false
}
</script>

<style scoped lang="scss">
.form-table {
  &-header {
    display: flex;
    background-color: #f4f9ff;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ebeef5;

    .header-item {
      flex: 1;
      padding: 0 5px;
      height: 100%;
      // line-height: 46px;
      // text-align: center;
      border-left: 1px solid #ebeef5;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &-item {
    display: flex;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ebeef5;

    .item {
      flex: 1;
      width: 100px;
      padding: 0 5px;
      height: 100%;
      line-height: 46px;
      text-align: center;
      border-left: 1px solid #ebeef5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 14px;
  padding: 30px 0;
  border: 1px solid rgb(235, 238, 245);

  span {
    margin-top: 10px;
  }
}
</style>